<template>
	<view>
		<!-- 顶部个人信息 -->
		<view class="info bj2">
			<view class="my_title">个人中心</view>
			<view class="my_top2">
				<view class="my_top2_set">
					<!-- <image class="setImg" :src="require('static/images/my/set.png')"></image> -->
				</view>
				<view class="info-box">
					<view class="left" v-if="token">
						<image class="mainImg" :src="u.avatar?u.avatar:require('static/images/tabs/my.png')" mode=""></image>
						<view class="loveNum">
							<view class="loveNumText">幸福号:{{usersInfo.loveId?usersInfo.loveId:0}}</view>
						</view>
					</view>
					<view class="left" v-else @click="toLogin">
						<view style="display: flex;align-items: center;">
							<image class="mainImg" :src="u.avatar?u.avatar:require('static/images/tabs/my.png')" mode=""></image>
							<view style="margin-left: 10px;font-size: large;">登录</view>
						</view>
					</view>
				</view>
				<view class="my_top2_line">
					<view class="my_red_line" v-if="token" @click="buyRedLine">购买红线</view>
					<view style="margin-top:10px;" v-if="token">红线 x {{usersInfo.redLine?usersInfo.redLine:0}}</view>
				</view>
			</view>
			<view class="my_top3" v-if="token">{{usersInfo.age?usersInfo.age:0}}岁 · {{usersInfo.height?usersInfo.height:0}}cm ·
				{{usersInfo.weight?usersInfo.weight:0}}kg</view>
			<view class="my_top4" v-if="token">
				<view class="my_top4_text">
					<view>资料完整</view>
					<view class="my_top4_text2">{{progress?progress:0}}%</view>
				</view>
				<view class="my_top4_line"></view>
				<view class="my_top4_text">
					<view>账号状态</view>
					<view class="my_top4_text2">{{usersInfo.status}}</view>
				</view>
				<view class="my_top4_line"></view>
				<view class="my_top4_text">
					<view>会员级别</view>
					<view class="my_top4_text2">{{usersInfo.levelName?usersInfo.levelName:'普通会员'}}</view>
				</view>
			</view>


		</view>

		<!-- 关注的 -->
		<!-- 		<view class="follow">
			<view class="fw-left" @tap="toFollow(0)">
				<view class="left-img">
					<i class="iconfont iconicon_biyan" style="color: #7A44FF;" v-if="!isVip"></i>
					<text v-if="isVip">{{ usersInfo.attention?usersInfo.attention:0 }}</text>
				</view>
				<view class="left-title">我关注的<image src="https://friend.tanshishang.cn/assets/img/tag-vip.png" mode="" v-if="!isVip"></image>
				</view>
			</view>
			<view class="fw-left" @tap="toFollow(1)">
				<view class="left-img">
					<i class="iconfont iconicon_biyan" style="color: #7A44FF;" v-if="!isVip"></i>
					<text v-if="isVip">{{ usersInfo.attentioned?usersInfo.attentioned:0 }}</text>
				</view>
				<view class="left-title">谁关注我<image src="https://friend.tanshishang.cn/assets/img/tag-vip.png" mode="" v-if="!isVip"></image>
				</view>
			</view>
		</view>
 -->
		<!-- 关注的人 -->
		<!-- 		<view class="follower">
			<view class="imgs">
				<view :class="{ 'active':!isVip }" class="imgBox" :style="{zIndex:item.num}" v-for="(item,index) in followList"
				 :key="index">
					<image :src="item.avatar" mode=""></image>
				</view>
			</view>
			<view class="follower-title" v-if="!isVip">最近有<text>{{ usersInfo.visitCount?usersInfo.visitCount:0 }}</text>个人来看过你,<text
				 @tap="toPay()">开通VIP立即查看</text></view>
			<view class="follower-title" v-if="isVip">最近有{{ usersInfo.visitCount?usersInfo.visitCount:0 }}个人来看过你,<text class="title-vp"
				 @tap="toFollow(2)">立即查看</text></view>
		</view>
 -->
		<view style="margin-top: 5px;"></view>
		<!-- 		<view class="item" @tap="toTabs(-1)">
			<view class="item-left">
				<i class="iconfont iconicon_wodeziliao" style="color: #75C0FF;margin-right: 20rpx;"></i>
				<text>管理员</text>
			</view>
			<view class="item-right">
				<i class="iconfont iconicon_gengduo icon" style="font-size: 24rpx;color: #999999;"></i>
			</view>
		</view> -->

		<view class="item" @tap="toTabs(0)">
			<view class="item-left">
				<i class="iconfont iconicon_wodeziliao" style="color: #ffaaff;margin-right: 20rpx;"></i>
				<text>我的资料</text>
			</view>
			<view class="item-right">
				<i class="iconfont iconicon_gengduo icon" style="font-size: 24rpx;color: #999999;"></i>
			</view>
		</view>

		<!-- 		<view class="item" @tap="toTabs(1)">
			<view class="item-left">
				<i class="iconfont iconicon_wodejiaoyouhuodong" style="color: #A3A3FD;margin-right: 20rpx;"></i>
				<text>交友活动</text>
			</view>
			<view class="item-right">
				<i class="iconfont iconicon_gengduo icon" style="font-size: 24rpx;color: #999999;"></i>
			</view>
		</view>

		<view class="item" @tap="toTabs(2)">
			<view class="item-left">
				<i class="iconfont iconicon_wodeyuehuiquanzi" style="color: #FF6E78;margin-right: 20rpx;"></i>
				<text>约会圈子</text>
			</view>
			<view class="item-right">
				<i class="iconfont iconicon_gengduo icon" style="font-size: 24rpx;color: #999999;"></i>
			</view>
		</view> -->

		<view class="item" @tap="toTabs(3)">
			<view class="item-left">
				<i class="iconfont iconicon_wodexiangce" style="color: #75C0FF;margin-right: 20rpx;font-size: 26rpx;"></i>
				<text>我的相册</text>
			</view>
			<view class="item-right">
				<i class="iconfont iconicon_gengduo icon" style="font-size: 24rpx;color: #999999;"></i>
			</view>
		</view>

		<!-- 		<view class="item" @tap="toTabs(4)">
			<view class="item-left">
				<i class="iconfont iconicon_woshihongniang" style="color: #FF6E78;margin-right: 20rpx;"></i>
				<text>我是红娘</text>
			</view>
			<view class="item-right">
				<i class="iconfont iconicon_gengduo icon" style="font-size: 24rpx;color: #999999;"></i>
			</view>
		</view> -->

		<!-- 		<view class="item" @tap="toTabs(5)">
			<view class="item-left">
				<i class="iconfont iconicon_wodedingdan" style="color: #75C0FF;margin-right: 20rpx;"></i>
				<text>我的订单</text>
			</view>
			<view class="item-right">
				<i class="iconfont iconicon_gengduo icon" style="font-size: 24rpx;color: #999999;"></i>
			</view>
		</view>
 -->
		<view class="item" @tap="toTabs(6)">
			<view class="item-left">
				<i class="iconfont iconicon_kefurexian" style="color: #44E9F3;margin-right: 20rpx;"></i>
				<text>客服热线</text>
			</view>
			<view class="item-right">
				<text class="phoneNum"></text>
				<i class="iconfont iconicon_gengduo icon" style="font-size: 24rpx;color: #999999;"></i>
			</view>
		</view>

		<view class="item" @tap="toTabs(7)">
			<view class="item-left">
				<i class="iconfont iconicon_pingtaijieshao" style="color: #A3A3FD;margin-right: 20rpx;"></i>
				<text>平台介绍</text>
			</view>
			<view class="item-right">
				<i class="iconfont iconicon_gengduo icon" style="font-size: 24rpx;color: #999999;"></i>
			</view>
		</view>

		<view style="display: flex;justify-content: center;margin-top: 10vh;">
			<view class="login-out" v-if="token" @tap="logOut">退出登录</view>
		</view>


	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapState(['token', 'userId'])
		},
		data() {
			return {
				usersInfo: {
					status: "",
					age: 0,
					height: "",
					loveId: "",
					weight: "",
					level: "", //会员级别
					vip: "0", //完整度
				},
				u: {},
				isAdmin: false,
				isVip: false,
				followList: [],
				kfList: ['13616171314', '13616181314'],
				tabItem: {
					num: 0
				},
				hasData: false,
				allInfo: {},
				progress: '',
			};
		},
		//分享给个人
		onShareAppMessage() {
			return {
				title: '青年交友',
				imageUrl: 'https://friend.tanshishang.cn/assets/img/shareImg.png',
				path: '/pages/index/index'
			}
		},
		//分享到朋友圈
		onShareTimeline() {
			return {
				title: '青年交友',
				path: '/pages/index/index'
			}
		},
		onLoad() {
			if (this.token && !this.hasData) {
				//获取数据
				this.getData()
				let uJson = uni.getStorageSync('userinfo')
				if (uJson) {
					this.u = JSON.parse(uJson)
				}
				this.getInfo()
			} else {
				this.toLogin()
			}
		},
		onShow() {
			if (this.token && !this.hasData) {
				//获取数据
				this.getData()
				let uJson = uni.getStorageSync('userinfo')
				if (uJson) {
					this.u = JSON.parse(uJson)
				}
				this.getInfo()
			}
			// this.getMsg();

		},
		methods: {
			...mapActions(['logout']),
			//点击了实名认证图片
			doSm() {
				if (this.usersInfo.certification == 1) {
					uni.showToast({
						title: '已实名认证!',
						mask: true
					})
				}
			},
			buyRedLine() {
				uni.showToast({
					title:"暂未开放"
				})
			},
			//获取信息数据
			async getInfo() {
				try {
					let parmars = {
						token: uni.getStorageSync('token'),
						id: this.u.id,
					};
					let res = await this.$request.request.get('/api/index/info', parmars);
					
					if (res.code == 200) {
						this.allInfo = res.data.data;
						// 			this.upInfo = {
						// 				id: 6,
						// 				username: user.username,
						// 				birthday: user.birthday,
						// 				avatar: user.avatar,
						// 				zodiac: user.zodiac,
						// 				constellation: user.constellation,
						// 				occupation: user.occupation,
						// 				income: user.income,
						// 				gender: user.gender,
						// 				character: user.character,
						// 				height: user.height,
						// 				address: user.address,
						// 				wxis_show: user.wxis_show,
						// 				cook_list: ["无"],
						// 				declaration: user.declaration,
						// 			}

						// 			let itemIndex = {
						// 				maritaldataIndex: user ? user.marry : 0,
						// 				heightdata: this.findIndexOne(this.heightArr, user.height + 'cm'),
						// 				weightdata: this.findIndexOne(this.weightArr, user.weight + 'kg'),
						// 				gender: this.findIndexId(this.allList.gender, user.gender),
						// 				zodiac: this.findIndexId(this.allList.zodiac, user.zodiac),
						// 				constellation: this.findIndexId(this.allList.constellation, user.constellation),
						// 				educationaldata: this.findIndexId(this.allList.educationaldata, user.education),
						// 				incomedata: this.findIndexId(this.allList.income, user.income),
						// 				cardata: this.findIndexId(this.allList.cardata, user.is_car),
						// 				housedata: this.findIndexId(this.allList.housedata, user.house),
						// 				industry: this.findIndexValue(this.allList.industry, user.occupation),
						// 				cookingdata: this.findIndexId(this.allList.cookingdata, user.is_cook),
						// 				// character: this.findIndexIdArr(this.allList.character, user.character.split(',')),
						// 				wxIsShow: this.findIndexId(this.allList.wxIsShow, user.wxis_show),
						// 			}
						// 			let item = {
						// 				avatar: user.avatar,
						// 				wxid: user.wx,
						// 				wxIsShow: this.allList.wxIsShow[itemIndex.wxIsShow].name,
						// 				username: user.username,
						// 				zodiac: this.allList.zodiac[itemIndex.zodiac].name,
						// 				gender: this.allList.gender[itemIndex.gender].name,
						// 				habitation: user.address,
						// 				maritaldata: this.marryArr[itemIndex.maritaldataIndex],
						// 				constellation: this.allList.constellation[itemIndex.constellation].name,
						// 				// age: '',
						// 				heightdata: user.height,
						// 				weightdata: user.weight,
						// 				educationaldata: this.allList.educationaldata[itemIndex.educationaldata].educationaldata,
						// 				incomedata: this.allList.income[itemIndex.incomedata].income,
						// 				cardata: this.allList.cardata[itemIndex.cardata].cardata,
						// 				housedata: this.allList.housedata[itemIndex.housedata].housedata,
						// 				// character:this.allList.character[itemIndex.character].character,
						// 				nation: '',
						// 				province: '',
						// 				city: '',
						// 				county: '',
						// 				address: user.address,
						// 				industry: this.allList.industry[itemIndex.industry].name,
						// 				smokingdata: '',
						// 				drinkingdata: '',
						// 				exercisedata: '',
						// 				petsdata: '',
						// 				cookingdata: this.allList.cookingdata[itemIndex.cookingdata].cookingdata,
						// 				selectionheightdata: '',
						// 				selectionage: '',
						// 				selectionweightdata: '',
						// 				selectioneducationaldata: '',
						// 				selectionincomedata: '',
						// 				selectioncounty: '',
						// 				selectionmaritaldata: '',

						// 			}
						this.allInfo.heightdata ? this.allInfo.heightdata += 'cm' : '';
						this.allInfo.weightdata ? this.allInfo.weightdata += 'kg' : '';

						//执行计算完成度
						this.result();


					}
				} catch (err) {
					this.$request.error(err, this)
				}
			},

			result() {
				let all = [
					'username', 'birthday', 'avatar', 'zodiac', 'constellation', 'occupation', 'income', 'gender',
					'character', 'height', 'address', 'wxis_show', 'declaration', 'weight', 'education', 'is_car', 'house', 'is_cook',
				]
				let has = 0;
				// let arr = [];
				// let arr2 = [];

				for (let i in this.allInfo) {
					// arr2.push(this.allInfo[i]);
					all.findIndex((item) => {
						if (i == item && this.allInfo[i]) {
							has++;
							return true
						}
					})
				}
				// let num = Number(arr.length);
				let num2 = Number(all.length);
				let n = parseInt(has / num2 * 100)
				this.progress = n >= 100 ? 100 : n;
				console.log('完成度:' + this.progress)
			},
			//获取消息数
			async getMsg() {
				// let token = uni.getStorageSync('token');
				// let userId = uni.getStorageSync('userId');
				// console.log(token);
				if (this.token) {
					try {
						let params = {
							token: this.token,
							userId: this.userId
						}
						let res = await this.$request.request.get('/api/user/noRead', params);
						console.log(res.data);
						this.$common.setCartBadge(res.data.count);
					} catch (err) {
						this.$request.error(err, this)
					}
				}

			},
			//请登录
			toLogin() {
				uni.navigateTo({
					url: "/pages/index/wxLogin"
				})
			},
			//0 我关注的  1谁关注我  2访客
			toFollow(e) {
				// if (!this.token) {
				// 	uni.showModal({
				// 		title: '您还未登录',
				// 		content: '点击登录,登录后可查看更多!',
				// 		showCancel: true,
				// 		confirmText: '登录',
				// 		success: (res) => {
				// 			// console.log(res);
				// 			if (res.confirm) {
				// 				uni.navigateTo({
				// 					url: "/pages/index/wxLogin"
				// 				})
				// 			} else if (res.cancel) {
				// 				console.log('用户点击取消');
				// 			}

				// 		}
				// 	});
				// 	return false;
				// }

				if (!this.isVip) {
					uni.showModal({
						title: '温馨提醒',
						content: '您还未开通VIP，仅有VIP才能进行此项操作',
						showCancel: true,
						confirmText: '开通VIP',
						success: (res) => {
							// console.log(res);
							if (res.confirm) {
								this.toPay();
							} else if (res.cancel) {
								console.log('用户点击取消');
							}

						}
					});
					return false;
				}


				uni.navigateTo({
					url: 'follow?type=' + e
				})
			},
			//前往vip权益详情
			toVipDetail() {
				uni.navigateTo({
					url: 'vipDetail'
				})
			},
			//获取数据
			async getData() {
				try {
					let params = {
						token: this.token
					};
					let res = await this.$request.request.get('/api/user/index', params)
					console.log(656565, res);
					if (res.code == 200) {
						this.hasData = true
						this.usersInfo = res.data.data;
						this.isVip = res.data.isVip ? res.data.isVip : 0;
						this.isAdmin = res.data.data.isAdmin ? res.data.data.isAdmin : false;
						let arr = res.data.visitList;
						let num1 = 90
						//修改访客数组
						if (arr && arr.length > 0) {
							for (let i in arr) {
								arr[i].num = num1;
								num1++;
							}
						}
						// this.followList = [...arr];

					}
				} catch (err) {
					this.$request.error(err, this)
				}
			},
			//前往页面
			toTabs(e) {

				// if (!this.token) {
				// 	uni.showModal({
				// 		title: '您还未登录',
				// 		content: '点击登录,登录后可查看更多!',
				// 		showCancel: true,
				// 		confirmText: '登录',
				// 		success: (res) => {
				// 			// console.log(res);
				// 			if (res.confirm) {
				// 				uni.navigateTo({
				// 					url: "/pages/index/wxLogin"
				// 				})
				// 			} else if (res.cancel) {
				// 				console.log('用户点击取消');
				// 			}

				// 		}
				// 	});
				// 	return false;
				// }
				// console.log(89898,this.$g.isLogin);
				if (!this.$g.isLogin) {
					return false
				}

				switch (e) {

					case -1:
						uni.navigateTo({
							url: '/pages/ext/admin/admin'
						})
						break;
					case 0:
						//我的资料
						uni.navigateTo({
							url: 'baseInfo'
						})
						break;
					case 1:
						//我的交友活动
						uni.navigateTo({
							url: 'makeFriends'
						});
						break;
					case 2:
						// 我的约会圈子
						uni.navigateTo({
							url: 'dateCircles'
						})
						break;
					case 3:
						// 我的相册
						uni.navigateTo({
							url: 'album'
						})
						break;
					case 4:
						// 我是红娘
						uni.navigateTo({
							url: 'matchmaker'
						})
						break;
					case 5:
						// 我的订单
						uni.navigateTo({
							url: 'myOrder'
						})
						break;
					case 6:
						// 客服热线
						uni.showActionSheet({
							itemList: ['13961989352（微信同号）', '17712534089 （微信同号）'],
							success: (res) => {
								console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
								// let num = res.tapIndex;
								// uni.makePhoneCall({
								// 	phoneNumber: this.kfList[num]
								// });
							},
							fail: (res) => {
								console.log(res.errMsg);
							}
						});
						break;
					case 7:
						// 平台介绍
						uni.navigateTo({
							// url: 'platformDetail'
							url: 'platformDetailNew'
						})
						break;
				}
			},
			//前往开通vip
			async toPay() {

				// if (!this.token) {
				// 	uni.showModal({
				// 		title: '您还未登录',
				// 		content: '点击登录,登录后可查看更多!',
				// 		showCancel: true,
				// 		confirmText: '登录',
				// 		success: (res) => {
				// 			// console.log(res);
				// 			if (res.confirm) {
				// 				uni.navigateTo({
				// 					url: "/pages/index/wxLogin"
				// 				})
				// 			} else if (res.cancel) {
				// 				console.log('用户点击取消');
				// 			}

				// 		}
				// 	});
				// 	return false;
				// }

				try {
					let params = {
						token: this.token
					};
					let res = await this.$request.request.post('/api/user/renewal', params)
					console.log(res);
					if (res.code == 200) {
						//跳转支付页
						uni.navigateTo({
							url: '/pages/my/payInfo?orderNo=' + res.data.orderNo + '&price=' + res.data.price
						})
					}
				} catch (err) {
					this.$request.error(err, this)
				}
			},
			//前往续费
			async toPay1() {

				// if (!this.token) {
				// 	uni.showModal({
				// 		title: '您还未登录',
				// 		content: '点击登录,登录后可查看更多!',
				// 		showCancel: true,
				// 		confirmText: '登录',
				// 		success: (res) => {
				// 			// console.log(res);
				// 			if (res.confirm) {
				// 				uni.navigateTo({
				// 					url: "/pages/index/wxLogin"
				// 				})
				// 			} else if (res.cancel) {
				// 				console.log('用户点击取消');
				// 			}

				// 		}
				// 	});
				// 	return false;
				// }

				try {
					let params = {
						token: this.token
					};
					let res = await this.$request.request.post('/api/user/renewal', params)
					console.log(res);
					if (res.code == 200) {
						//跳转支付页
						uni.navigateTo({
							url: '/pages/my/payInfo?orderNo=' + res.data.orderNo + '&type=2' + '&price=' + res.data.price +
								'&title=续费VIP需支付(有效期一年)'
						})
					}
				} catch (err) {
					this.$request.error(err, this)
				}
			},
			//登出
			logOut() {
				uni.showLoading({
					title: '正在登出...'
				});
				setTimeout(() => {
					this.logout();
					uni.hideLoading();
					uni.reLaunch({
						url: '/pages/index/index'
					});
				}, 1000)
			},
		}
	}
</script>

<style lang="scss">
	@import 'my.scss'
</style>
